﻿
@model YouWei.Infrastructure.Models.CommentDto

@{
                /**/

                /**/

                ViewBag.Title = "文章发布(公众号)";
                Layout = "~/Views/Shared/_Layout.cshtml";
}
@section style{
    <link href="@Url.Content("~/js/umeditor/themes/default/css/umeditor.css")" rel="stylesheet" />
}

<section class="content-header">
    <h1>
        文章发布（公众号）
        <small></small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>主页</a></li>
        <li class="active">文章发布</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="box box-primary">
            @*<div class="box-header with-border">
                    <h3 class="box-title">文章发布</h3>
                </div>*@
            <!-- /.box-header -->
            <!-- form start -->
            <div class="box-body">
                <div class="form-group">
                    <label for="commentSection">所属板块</label>
                    <select class="form-control" id="commentSection" style="width: 25%;">
                        <option selected value="1">车趣杂谈</option>
                        <option value="2">车友生活</option>
                        <option value="3">丽人馆</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="commentLink">抓取链接<span style="color:red">（填写该项则其他所有项为自动获取，且【文章链接】无效）</span></label>
                    @if (Model.CommentType == 2)
                    {
                        <input type="text" class="form-control" id="commentLink" placeholder="输入公众号文章链接" value="@Model.CommentLink">
                    }
                    else
                    {
                        <input type="text" class="form-control" id="commentLink" placeholder="输入公众号文章链接">
                    }
                    <input type="button" class="btn btn-primary" value="获取内容" id="grab" />
                </div>
                <div class="form-group">
                    <label for="commentLink">文章链接<span style="color:red">（填写该项则其他所有输入项无效）</span></label>

                    @if (Model.CommentType == 3)
                    {
                        <input type="text" class="form-control" id="commentLink2" placeholder="请输入文章链接" value="@Model.CommentLink">
                    }
                    else
                    {
                        <input type="text" class="form-control" id="commentLink2" placeholder="请输入文章链接">
                    }
                </div>
                <div class="form-group">
                    <label for="commentName">名称</label>
                    <input type="text" class="form-control" id="commentName" maxlength="50" placeholder="自动获取" value="@Model.CommentName">
                </div>
                <div class="form-group">
                    <label for="commentDesc">简介</label>
                    <textarea class="form-control" id="commentDesc" maxlength="100" rows="3" placeholder="自动获取">@Model.CommentDesc</textarea>
                </div>
                <div class="form-group">
                    <label for="commentDesc">头图</label>
                    <div class="form-control" style="border-width:0px;">
                        <div id="HeadImageUrl" class="col-sm-10 dm-uploader">
                            <div role="button" class="btn btn-primary mr-2">
                                <i class="fa fa-fw fa-folder-o"></i>图片上传
                                <input type="file" title="Click to add Files">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="over-hidden" style="">
                        <div id="divImg" class="img-wrapper-titlephoto fl" style="display: none;">
                            <img id="imgPhoto" style="width: 360px; height: 160px;border:1px solid #ccc " />
                            <input type="hidden" id="hidDbUrl" />

                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="commentDesc">文章详情</label>
                    <!-- 加载编辑器的容器 -->
                    <script id="container" name="content" type="text/plain" style="width:80%; height:40%">
                    </script>
                </div>
                <div class="form-group">
                    <input type="button" style="width:5%;display:none" class="btn btn-primary" id="draft" value="草稿" />
                    <input type="button" style="width:5%" class="btn btn-primary" id="save" value="发布" />
                </div>
            </div>
        </div>

    </div>
</section>
@section scriptsBottom{
    <script src="@Url.Content("~/js/umeditor/umeditor.config.js")"></script>
    <script src="@Url.Content("~/js/umeditor/umeditor.js")"></script>
    <script type="text/javascript">
        var um = UM.getEditor('container');
        $(function () {
            renderImg();
            binds();
            setSection();
            um.ready(function () {
                um.setContent("");
                var editDetail = `@Html.Raw(Model.Detail)`;
                if (editDetail) {
                    um.execCommand('insertHtml', editDetail);
                }
            });
        });

        function binds() {
            $("#draft").on("click", function () {
                save(0);
            });
            $("#save").on("click", function () {
                save(1);
            });
            $("#grab").on("click", function () {
                getComment();
            });
            //document.addEventListener('paste', function (e) {
            //    //alert("粘贴");
            //    var pastedText = '';
            //    if (window.clipboardData && window.clipboardData.getData) { // IE
            //        pastedText = window.clipboardData.getData('Text');
            //    } else {
            //        pastedText = e.clipboardData.getData('Text');
            //    }
            //});
        }

        function setSection() {
            var section =@Model.CommentSection;
            $("#commentSection").val(section);
        }

        function getComment() {
            var link = $("#commentLink").val() || "";
            if (link == "") {
                BMCW.alert("链接不能为空");
                return false;
            }
            var url = "@Url.Action("GetCommentDetailByLink", "Product")?wxLink=" + link ;
            BMCW.ajax({
                url: url,
                type: "POST",
                data: {},
                success: function (res) {
                    if (res.status == 0) {
                        console.log(res.data);
                        BMCW.alert("解析成功");
                        $("#commentName").val(res.data.CommentName);
                        $("#commentDesc").val(res.data.CommentDesc);
                        um.setContent("");
                        um.execCommand('insertHtml', res.data.Detail);
                    } else {
                        BMCW.alert(res.message);
                    }
                },
                error: function () {
                    BMCW.alert("解析失败，请联系技术人员");
                }
            });
        }

        function save(isShow) {
            var CommentLink = "";
            var CommentType = 1;//CommentType=1为自定义，2为抓取文章，3为h5链接前端直接引用页面

            //如果有抓取链接，则以抓取链接为准，类型为2
            if ($.trim($("#commentLink").val()) != "") {
                CommentLink = $("#commentLink").val();
                CommentType = 2;
            } else if ($.trim($("#commentLink2").val()) != "") {
                //如果没填抓取链接，并且存在文章链接，则类型为3（h5链接）
                CommentLink = $("#commentLink2").val();
                CommentType = 3;
            }
            var data = {
                CommentName: $("#commentName").val(),
                CommentDesc: $("#commentDesc").val(),
                CommentType: CommentType,
                IsShow: isShow,
                HeadImgUrl: $("#hidDbUrl").val()||"",
                CommentLink: CommentLink,
                CommentSection: $("#commentSection").val(),
                Detail: replaceFont( um.getContent())
            };
            console.log(data);
            //data.Detail && replaceFont(data.Detail);
            var url = "@Url.Action("CommentSave","Product")?id=@ViewBag.CommentID";
            BMCW.ajax({
                url: url,
                type: 'POST',
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        //草稿留在当前页
                        if (data.isShow == 0) {
                            BMCW.alert("保存草稿成功");
                        } else {
                            BMCW.alert("发布成功");
                            window.location.href = "@Url.Action("CommentIndex", "Product")";
                        }
                    } else {
                        BMCW.alert(res.message);
                    }
                }
            });
        }
         function renderImg() {
            $('#HeadImageUrl').dmUploader({ //
                url: '@Url.Action("UploadImg", "Product")',
                maxFileSize: 3000000, // 3 Megs max
                multiple: false,
                allowedTypes: 'image/*',
                extFilter: ['jpg', 'jpeg', 'png', 'gif'],
                onUploadSuccess: function (id, response) {
                    if (response.status==0) {
                        var oData = response.data;
                        $("#imgPhoto").attr("src",oData.HttpImgUrl);
                        $("#hidDbUrl").val(oData.ImgUrl);//存数据库里的相对路径
                        $("#divImg").show();
                        $("#hidImgPhoto-error").remove();
                    } else {
                        alert(response.data.message);
                    }
                }
            });
        }
        //过滤editor里的特殊字符、字体、标签
        function replaceFont(detail) {

            var tmp = $(detail);
            var spans = tmp.find("span");
            if (spans.length > 0) {
                $.each(spans, function (index, item) {
                    var $span = $(item);
                    var styleStr = $span.attr("style");
                    if (styleStr) {
                     //过滤汽车之家的<span style="margin: 0px; padding: 0px; list-style: none; font-family: myfont;">
                        if (styleStr.indexOf("myfont") >-1) {
                        $span.remove();
                        } else if (styleStr.indexOf("ycfont") > -1) {
                        $span.remove();
                    }
                    //过滤懂车帝粗字体格式 <span style="font-weight: 700;">隆翠自由风Plus</span>
                        else if (styleStr.indexOf("font-weight") > -1 || styleStr.indexOf("color") > -1) {
                        $span.prop('outerHTML', $span.html());
                    }
                    }
                });
            }
            var strongs = tmp.find("strong");
            if (strongs.length > 0) {
                $.each(strongs, function (index, item) {
                    var $item = $(item);
                    $item.prop('outerHTML', $item.html());
                });
            }
            var str = "";
            tmp.each(function () {
                str += $(this).html();
            });
            return str;
        }
    </script>

}